<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>百度地图</title>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=54wC2NlZBgqkxVmsK9VQnQh7ixb7NwQH">
        </script>
    <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div style="position: absolute;left: 0; top: 0;z-index: 9999;">
        <button id="showLocation"></button> <input type="text" id="address" /> <button id="getlatlng">获取地址的经纬度</button>
        <button id="getAddress">根据根据经纬度找目的地</button>
        <button id="ip">ip定位</button>
        <div>起点<input id="start" />终点<input id="end" /> <button id="showLine">查看路线</button>
            <button id="move">开始播放规矩</button>
            <button id="btn">按钮1</button>
        </div>
    </div>
    <div id="container"></div>

</body>
<script>
    //bad09ba7912a718dd122368c56bdaad7
    var map = new BMapGL.Map("container");
    //初始化地图
    var point = new BMapGL.Point(116.331398, 39.897445);
    //设置地图的中心点
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
    var myGeo = new BMapGL.Geocoder();


    let addressInput = document.getElementById("address");
    let getlatlngBtn = document.getElementById("getlatlng");
    let getAddressBtn = document.getElementById("getAddress");
    let showLocationBtn = document.getElementById("showLocation");
    let ipBtn = document.getElementById("ip");
    let startInput = document.getElementById("start");
    let endInput = document.getElementById("end");
    let showLineBtn = document.getElementById("showLine")
    let moveBtn = document.getElementById("move");
    let btn  = document.getElementById("btn");

    btn.onclick = function(){
        moveBtn.click();
    }


    moveBtn.onclick = function () {


        var point = [];
        let startLng = 116.331398;
        let startLat = 39.897445;
        for (let i = 0; i <= 100; i++) {
            startLng = startLng + 0.00001;
            startLat = startLat + 0.00001
            point.push(new BMapGL.Point(startLng, startLat));
        }

        var pl = new BMapGL.Polyline(point);

        var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
            overallView: true, // 动画完成后自动调整视野到总览
            tilt: 30,          // 轨迹播放的角度，默认为55
            duration: 20000,   // 动画持续时长，默认为10000，单位ms
            delay: 3000        // 动画开始的延迟，默认0，单位ms
        });
        trackAni.start();

    }



    showLineBtn.onclick = async function () {
        var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
        let p1 = await addressToLatLng(startInput.value);
        let p2 = await addressToLatLng(endInput.value);

        var point1 = new BMapGL.Point(p1.lng, p1.lat);
        var point2 = new BMapGL.Point(p2.lng, p2.lat);

        driving.search(point1, point2);

        //   var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
        //   walking.search(startInput.value, endInput.value);
    }

    function addressToLatLng(address) {
        return new Promise((resolve) => {
            myGeo.getPoint(address, function (point) {
                resolve(point)
            })
        })

    }

    getlatlngBtn.onclick = function () {
        //alert(addressInput.value);
        myGeo.getPoint(addressInput.value, function (point) {
            var point1 = new BMapGL.Point(point.lng, point.lat);
            //设置地图的中心点
            map.centerAndZoom(point1, 15);
        })
    }
    getAddressBtn.onclick = function () {
        myGeo.getLocation(new BMapGL.Point(114.360794, 30.541193), function (result) {
            if (result) {
                alert(result.address);
            }
        });
    }
    map.addEventListener('click', function (e) {
        var pt = e.latlng;
        myGeo.getLocation(pt, function (rs) {
            console.log(rs);
            var addComp = rs.addressComponents;
            // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            var point1 = new BMapGL.Point(rs.point.lng, rs.point.lat);
            //设置地图的中心点
            map.centerAndZoom(point1, 15);


        })
    })


    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(r);
            var mk = new BMapGL.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            showLocationBtn.innerHTML = r.address.city;


        }
        else {
            alert('failed' + this.getStatus());
        }
    });

    ipBtn.onclick = function () {
        function myFun(result) {
            var cityName = result.name;
            map.setCenter(cityName);
            alert("当前定位城市:" + cityName);
        }
        var myCity = new BMapGL.LocalCity();
        myCity.get(myFun);
    }


</script>

</html>